/**
 * Simple ExtJS 4 wrapper class for HighCharts chart. The actual chart setup
 * logic is delegated to vvg.lib.hc.*; this class only acts as a thin wrapper
 * to allow the chart component to be laid out using ExtJS 4.
 * 
 * Relies on:
 * - vvg.lib
 * - vvg.lib.hc.* to create actual HighCharts component.
 * 
 * @author: King Lung Chiu
 */
(function(vvg){
   
   var app = vvg.app;
   var lib = vvg.lib;
   var libHC = lib.hc;
   var appBoreCharts = app.xBoreCharts = app.xBoreCharts || [];
   var VIZ_BORE_SELECTED = lib.eventNames.VIZ_BORE_SELECTED;
   var VIZ_BORE_UNSELECTED = lib.eventNames.VIZ_BORE_UNSELECTED;
   
      
   Ext.define('VVG.view.BoreChart', {
      extend: 'Ext.Component'
      ,alias : 'widget.borechart'
      
      ,initComponent: function() {         
         this.addEvents(VIZ_BORE_SELECTED);
         this.addEvents(VIZ_BORE_UNSELECTED);
         
         this.callParent(arguments);
         appBoreCharts.push(this);
      }
      
      ,afterComponentLayout : function() {
         this.vvg_redrawChart();
         this.callParent(arguments);
         lib.log('BoreChart.afterComponentLayout() called!');
      }
      
      /**
       * Container for holding custom properties.
       */
      ,vvg_appData: {
         hChart: null   // the internal HighCharts chart component
      }
      
      /**
       * Redraws the internal HighCharts chart. Call this when the component
       * is resized, so the chart can display properly again.
       * 
       * Will create the actual HighCharts chart component if it doesn't
       * already exist.
       */
      ,vvg_redrawChart: function() {
         var self = this;
         var appData = self.vvg_appData;
         var hChart = appData.hChart;
         if(!hChart) {
            appData.hChart = libHC.createBoreChart(
               self.getId()
               ,null
               ,lib.objFromKVPairs([                  
                  [VIZ_BORE_SELECTED, function(boreId){
                     self.fireEvent(VIZ_BORE_SELECTED, boreId);
                  }]
                  ,[VIZ_BORE_UNSELECTED, function(boreId){
                     self.fireEvent(VIZ_BORE_UNSELECTED, boreId);
                  }]
               ])
            );
         } else {
            hChart.setSize(this.getSize().width, this.getSize().height);
         }
      }
      
      /**
        * Updates the internal chart with new visualisation data.
        * 
        * See the same function under vvg.lib.hc for details.
        */
      ,vvg_updateData: function(vizData) {
         this.vvg_appData.hChart.vvg_updateData(vizData);
      }
   });
   
}(window.vvg = window.vvg || {}));
